import { Form, Menu, Modal, Tabs } from "antd";
import type { FormProps } from "antd";
import type { TabsProps } from "antd";
import styles from "./styles.module.less";
import { useEffect, useState } from "react";
import Conv from "./conv";
import Hotkey from "./hotkey";
import { useShallow } from "zustand/react/shallow";
import { useConfigStore } from "@/store/configStore";

type TabsItem = Required<TabsProps>["items"][number];

interface ISettingModalProps {
  open: boolean;
  closeModal: () => void;
}

const tabList: TabsItem[] = [
  {
    key: "conv",
    label: "常规",
  },
  {
    key: "hotkey",
    label: "快捷键",
  },
];

const SettingModal = (props: ISettingModalProps) => {
  const { open, closeModal } = props;
  const [form] = Form.useForm();
  const [activeKey, setActiveKey] = useState("conv");

  const { config } = useConfigStore(
    useShallow((state) => ({
      config: state.config,
    }))
  );

  const onFinish: FormProps["onFinish"] = (values) => {
    // 获取保留字段值
    useConfigStore.setState({
      config: { ...form.getFieldsValue(true) },
    });
    closeModal?.();
  };

  useEffect(() => {
    if (open) {
      form.setFieldsValue({ ...config });
    }
  }, [open]);

  return (
    <Modal
      title="偏好设置"
      className={styles.settingModal}
      open={open}
      onCancel={() => {
        closeModal?.();
      }}
      okText="保存"
      cancelText="取消"
      centered
      destroyOnClose
      okButtonProps={{ htmlType: "submit" }}
      closable={false}
      maskClosable={false}
      modalRender={(dom) => (
        <Form
          className={styles.form}
          layout="horizontal"
          form={form}
          // labelCol={{ span: 7 }}
          labelAlign="right"
          onValuesChange={(_, val) => {
            console.log(val);
          }}
          autoComplete="off"
          onFinish={onFinish}
        >
          {dom}
        </Form>
      )}
    >
      <Tabs
        className={styles.tabs}
        activeKey={activeKey}
        tabPosition="left"
        items={tabList}
        onChange={(key) => {
          setActiveKey(key);
        }}
      />
      <div className={styles.content}>
        {activeKey === "conv" && <Conv />}
        {activeKey === "hotkey" && <Hotkey />}
      </div>
    </Modal>
  );
};

export default SettingModal;
